<!doctype html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>后台登录</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" href="/X-admin/css/font.css">
    <link rel="stylesheet" href="/X-admin/css/login.css">
    <link rel="stylesheet" href="/X-admin/css/xadmin.css">
    <script src="/X-admin/js/jquery.min.js"></script>
    <script src="/X-admin/lib/layui/layui.js" charset="utf-8"></script>

</head>
<body class="login-bg">

<div class="login layui-anim layui-anim-up">
    <div class="message">餐饮管理登录</div>
    <div id="darkbannerwrap"></div>

    <form method="post" class="layui-form">
        <input name="username" id="username" placeholder="用户名" type="text" lay-verify="username" class="layui-input">
        <hr class="hr15">
        <input name="password" lay-verify="required" placeholder="密码" type="password" class="layui-input">
        <hr class="hr15">
        <div style="display: flex;align-items: center">
            <input name="code" lay-verify="required" placeholder="验证码" type="text" class="layui-input">
            <img src="/code" width="100px" id="imgCode" height="30" onclick="changeCode()" title="点击换一张"
                 style="cursor: pointer">
        </div>
        <hr class="hr15">
        <input value="登录" lay-submit lay-filter="login" style="width:100%;" type="submit">
        <hr class="hr20">
    </form>
</div>

<script>
    function changeCode() {
        $("#imgCode").attr("src", "/code?aa=" + Math.random());
    }

    $(function () {//页面加载完成执行里面的代码
        layui.use('form', function () {
            var form = layui.form;//得到form表单
            // layer.msg('玩命卖萌中', function(){
            //   //关闭后的操作
            //   });
            //js事件  都是通过on表示
            //监听提交，对form表单进行事件的添加
            //input  如果要得到输入框的值value，form表单 通过name属性
            // lay-filter  过滤   找到当前filter里面的值
            //自定义验证规则
            form.verify({
                username: [/^[a-zA-Z0-9_-]{6,16}$/, "用户名必须是6到16位"],

            });
            form.on('submit(login)', function (data) {
                // alert(888)
                //layer.msg弹出一个提示框
                // location.href跳转页面
                // data.field得到form表单所有的属性值,最终的值类型为对象
                // js的数据类型?
                // 字符串 string
                // 数值 number
                // 对象 Object
                // 数组 Array
                // 布尔 boolean
                // js 数据类型定义？
                // let
                // let letname = "supeng";//局部变量
                // // var
                // var varname = "supeng";//全局变量
                // // // const
                // const constname = 11;//静态变量
                // for (let i = 0; i < 5; i++) {
                //     let letnamea = "supeng";
                //     var varnamea = "supeng";
                //     const constnamea = 11;
                // }
                //js 打印
                // console.log()
                // JSON.stringify 将data.field强制转换为字符串
                // lay-verify="required" 判断是否需要验证   required 表示必须验证
                // 验证 必须涉及到正则表达式
                // js的构造函数  一般情况下 以大写书写
                // let name="fasdfas\nfasdfa\nhasd";
                // name.lastindexof("s"); 17
                // let rega = /h/gi;//表示正则表达式
                // let reg = new RegExp(rega);
                // console.log(!$("#username"));
                // console.log(!1);

                // location.href = 'index.html'
                //    点击登录需要进入后台去数据库查询当前用户名和密码是否存在，
                //    如果存在则进行正常的登录，如果不存在，
                //    则提示用户重新输入用户名或者密码
                // 如果用模板，则表示后台可以是任何语言的代码
                //    我们可以通过ajax将所有的值传递到后台
                //var car = {type:"porsche", model:"911", color:"white"};//普通对象
                //var car = {"type":"porsche", "model":"911", "color":"white"}; json对象
                $.ajax({
                    url: '/login',//访问后台java代码地址，对应的是servlet上面的注解
                    data: data.field,//前台传递给后台的数据，一般情况下都是以json对象的形式进行传递
                    type: 'post',//对应的是servlet里面方法名称  ---  get  post
                    dataType: 'json',//后台返回前端的数据格式,text/html
                    success: function (data) {//这里的data表示后台返回前端的数据
                        console.log(data);
                        if (data.result == "error-code") {
                            layer.msg("验证码不正确，请重新输入");
                        }
                        if (data.result == "error") {
                            layer.msg("用户名或者密码不正确，请重新输入");
                        }
                        if (data.result == "success") {
                            //登录成功需要将用户名传入到另一个页面
                            //可以将用户名存入到某个作用域
                            //js有两个作用域
                            // sessionStorage
                            // localStorage  cookie
                            //$("#username").val() 拿到表单里面的数据
                            // $("#username").html() 拿到div里面的数据
                            sessionStorage.setItem("username", $("#username").val());
                            location.href = "/html/index.html";
                        }
                    }
                });

                return false;
            });
        });
    })
</script>
<!-- 底部结束 -->
<script>
    //百度统计可去掉
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</body>
</html>